/* This section begins the css code for layout of all page except the index.html/home page  */


/* The <div> element is a block-level and is often used as a container for other HTML elements
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content.
In the following CSS element I will dictate the text size as well as the padding and background color for many of the pages found in the publish folder*/

fontsize {
  font-size: 20px;
 Background-color:linen;   padding:30px;">
}

body {
  margin: 5px;
  background-color: rgb(102, 204, 204);

}

.navbar {
    list-style-type: none;
    display: inline;
     margin: 0;
    padding: 0;
    overflow: hidden;
    width: 30px;
    background-color: #dddddd;
      width: 100%; /* Full width */
 }

.navbar li {display: inline;
}

.navbar li a {
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to (white) on hover */
li a:hover {
    background-color: white;
}

strong { 
    font-weight: bold;
}
a {
    text-decoration: none;
}

#content a {
    font:weight: bold;
}

.center {
    margin: auto;  /*To horizontally center a block element
			 (like <div>), use margin: auto;*/
    width:35%;
    padding: 5px;
    }

.centerapproachmarker{
    margin: auto;
    width:25%;
    padding: 5px;
    }

.centerPhotos {
    margin: auto;
    width: 60%; /*for photos this is the horizontal distance from the right
			 margin. For tables this is the width into which the tables have
			 to fit.  A large % spreads the table.  A small % narrows the 
			table.*/
    padding: 5px;
    }

/* photoframe will frame  Jack's photo */
#photoframe {
        margin: auto;
	box-sizing: content-box;    
	padding: 10px;    
	border: 10px double grey;
	text-align: center;  /*To just center the text inside an element,
					 use text-align: center;*/

	background-color: linen;
	width: 60%;  /* The width of the photo frame will be 60% of the
				 screen width */
}    

.centerTables{
    margin: auto;
    width: 80%;/*For tables this is the width into which the tables have to fit.  A large % spreads the table.  A small % narrows the table. For photos this is the horizontal distance from the right margin. */
    padding: 5px;    
    }

.textframe {
    margin: auto; /*The CSS auto value is used to horizontally centers the content.*/
    box-sizing: content-box;    
    padding: 50px;

    border: 10px double grey;  /* border is the box around the content.
		You can specify the thickness in px, type, and color.*/  
    text-align: left;
    background-color:linen;
    width: 75%;

}

#headerframe {
    margin: auto;
    box-sizing: content-box;    
    padding: 5px;    
    border: 10px double grey;
    text-align: center;
    background-color:linen;
    width: 45%;  /* The width of the frame which contains 
	              the text will be 45% of the screen width */

}

ul.square {
    list-style-type: square;
}

h2 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h3 {
    font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight: bold;
	text-align: center;
}

h4 {
	font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}


h5 {
	font: Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}

p {
    font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 20px;
}

p.publish {
    font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
    font-size: 16px;
}

/* This "double" class will put all div containers with the class "double" 
a double border with a width of 45px */

div.double {
border-style: double;
  margin: auto;
    width:45%;
  padding: 5px;
}

/* ************************************************************************* */
/* This section of the style sheet is reserved for Ranveer Singh's Page*/

/* This "Singh" class will put all div containers with the class "Singh" 
a solid border.  The width of 660px is used because that is the width of Singh's photo.
_____________________________________________________________
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins*/

div.Singh {
border-style: solid;
width:660px;
margin: auto;
padding: 5px;
}
/* ************************************************************************* */

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 3px;
}

p.IntroBoxCheckBack {
	font-family: Helvetica, Geneva, Arial, Verdana, sans-  serif;
  font-size: 16px;
  font-style: italic;
}

/* Style the header */
.header {
  /* background-color: #f1f1f1; header background will be white*/
  background-color: linen;
 padding: 20px;
  text-align: center;
}

/* *******************************************************************************/

/* This section begins the css code for layout of the index.html/home page  */

/* Style the header
.header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
} */

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 35%;
}

/* Middle column */
.column.middle {
  width: 65%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
/* *******************************************************************************/
/* This css section is for pages that use tooltip popups*/
.tooltip {
  text-decoration:none;
  position:relative;
}
 
.tooltip span {
  display:none;
  border-radius:6px;
  color:black;
  background:white; 
}
 
.tooltip span img {
  float:left;
  margin:0px 8px 8px 0;
}
 
.tooltip:hover span {
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:600px;
  min-height:400px;
  border:1px solid black;
  margin-top:12px;
  margin-left:-50px;
  overflow:hidden;
  padding:8px;
}
/* *******************************************************************************/
/* This css section is for floating boxes side by side/
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 50%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* ******************************************************************************* 
					Video Class
This css section is for pages that need a border for videos.  As the user down sizes the video window less that the coded player width, this code will rescale the video player as the user re sizes the browser window less than the to see how the size of the video player will scale when the width is less than 400px.
*******************************************************************************/

video {
  max-width: 100%;
  height: auto;
border: 5px solid black;
}
/* *******************************************************************************/